<template>
  <div class="container " >
    <div style="padding: 20px;width: 100%;height: 100%">


    <div class="row between " style="width: 100%; align-items: center;">
      <Input v-model="input" placeholder="搜索题材" icon="ios-search" @on-click="doSearch" size="large" style="width: 300px"
             @on-keyup="doSearch"/>
      <span style="text-align: center;font-size: 25px;width: 90%">{{title}}</span>


    </div>
    <Table height="800"  :columns="subjectHeader" :data="subjectData" border highlight-row @on-current-change="onSelected"
           style="margin-top: 20px;"></Table>
    </div>

    <Modal
      width="400"
      title="修改题材"
      @on-ok="commitSetTopicName"
      v-model="modalSetTopName">
      <div class="col">
        <span style="margin-bottom: 10px">修改前：</span>
        <Input v-model="currentSubject.topicName" disabled/>
        <span style="margin-top: 20px;margin-bottom: 10px">修改后：</span>
        <Select  filterable style="width:200px" @on-change="onSelectTopicName" clearable ref="setTopicNameSelect">
          <Option v-for="item in topicNameList" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </div>
    </Modal>
  </div>
</template>

<script>

  import axios from '../../src/assets/http/http'

  export default {
    name: 'SubjectUncheck',
    data() {
      return {
        input: '',
        title:'',
        addTopicName: '',
        addBlockName: '',
        modalSetTopName: false,
        setNewTopicName: '',
        currentSubject: '',
        subjectData: [],
        localData: [],
        topicNameList: [],
        subjectHeader: [
          {
            title: '题材',
            key: 'topicName',
            minWidth: 170,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    minHeight: '20px',
                    mindWidth: '50px',
                    paddingLeft: '10px',
                    paddingRight: '10px',
                  },
                  on: {
                    click: () => {
                      this.setTopicName(params.row)
                    }
                  }
                }, params.row.topicName === '' ? '   ' : params.row.topicName),])

            }

          }, {
            title: '名称映射',
            key: 'blockName',
            minWidth: 100,
            align: 'center',

          },
          {
            title: '来源',
            key: 'from',
            minWidth: 100,
            align: 'center',

          },
          {
            title: '事件数量',
            key: 'eventCount',
            minWidth: 100,
            align: 'center',

          },
          {
            title: '0：未确认 1：删除 2：保留',
            key: 'manualHandleStatus',
            minWidth: 190,
            align: 'center',

          },
          {
            title: '是否确认',
            key: '',
            minWidth: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      this.setYes(params)
                    }
                  }
                }, '是'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.setNo(params)
                    }
                  }
                }, '否'),
              ]);
            }
          },
          {
            title: '添加关键词',
            key: '',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {

                  },
                  on: {
                    click: () => {
                      this.toAddKeyword(params.row)
                    }
                  }
                }, '添加'),
              ]);
            }
          },
          {
            title: '编辑股票',
            key: '',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {

                  },
                  on: {
                    click: () => {
                      this.toEditStock(params.row)
                    }
                  }
                }, '编辑'),

              ]);
            }
          }]
      }
    },

    methods: {
      toEditStock(item){
        if (item.topicName === '') {
          alert("题材为空，先输入题材")
          return;
        }
        this.$emit('toEditStock', item);
      },
      toAddKeyword(item){
        if (item.topicName === '') {
          alert("题材为空，先输入题材")
          return;
        }
        this.$emit('toAddKeyword', item);
      },
      onSelected(currentRow, oldCurrentRow) {
        this.title = currentRow.blockName;
      },
      onSelectTopicName(value) {
        this.currentSubject.newTopicName = value;
      },

      setYes(item) {

        if (item.row.topicName === '') {
          alert("题材为空，先输入题材")
          return;
        }

        axios.post('man/newBlock/setNewBlock', {
          'topicName': item.row.topicName,
          'blockName': item.row.blockName,
          'from': item.row.from,
          'manualHandleStatus': 2,
          'eventCount': item.row.eventCount,
          'id': item.row.id
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            item.row.manualHandleStatus = 2;
            this.$Message.success("确认成功");
          }
        }).catch(error => {
          console.log(error)
        });

      },
      setNo(item) {
        if (item.row.topicName === '') {
          alert("题材为空，先输入题材")
          return;
        }

        axios.post('man/newBlock/setNewBlock', {
          'topicName': item.row.topicName,
          'blockName': item.row.blockName,
          'from': item.row.from,
          'manualHandleStatus': 1,
          'eventCount': item.row.eventCount,
          'id': item.row.id
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            item.row.manualHandleStatus = 1;
            this.$Message.success("确认成功");
          }
        }).catch(error => {
          console.log(error)
        });
      },
      commitSetTopicName() {
        this.currentSubject.topicName = this.currentSubject.newTopicName;
      },
      setTopicName(item) {
        this.$refs.setTopicNameSelect.clearSingleSelect();
        this.currentSubject = item;
        this.modalSetTopName = true;
      },
      doSearch() {
        if (this.input === null || this.input.trim() === "") {
          this.subjectData = this.localData;
        } else {
          this.subjectData = [];
          var resule = this.input.trim().toLocaleLowerCase();
          for (var i = 0; i < this.localData.length; i++) {
            if (this.localData[i].blockName.toLocaleLowerCase().indexOf(resule) >= 0 ||
              this.localData[i].topicName.toLocaleLowerCase().indexOf(resule) >= 0) {
              this.subjectData.push(this.localData[i]);
            }
          }
        }

      },
      initTable() {
        axios.get('newBlock/listAllNewBlock').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.localData = this.subjectData = [];
              this.localData = this.subjectData = rsp.data.retData;
            }
          }
        }).catch(error => {
          console.log(error);
        })
      },
      initTopicNameList() {
        axios.get('subject/listAllSubjectName').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.topicNameList = [];
              this.topicNameList = rsp.data.retData;
            }
          }
        }).catch(error=>{
          console.log(error);
        })
      }
    },
    created() {
      this.initTable();
      this.initTopicNameList();
    }
  }
</script>

<style scoped>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1281px) and (max-width: 2000px) {

  }


</style>
